<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @include('common-css')
    <style>

        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .input_label {
            width: 120px;
            box-sizing: border-box;
        }

        .project-table {
            margin-top: 15px;
        }

        .status-tag {
            color: #1890ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            background: #e6f7ff;
            font-size: 12px;
            padding: 2px 3px;
        }

        .ant-table-tbody > tr > td, .ant-table-thead > tr > th {
            vertical-align: middle;
            line-height: 25px;
        }

        .search_box {
            width: 1000px;
        }

        .search_box input {
            width: 300px;
        }

        .search_box button {
            margin-left: 20px;
        }

        .search_box .ant-select {
            margin-left: 20px;
        }
    </style>
</head>
<body>


<div id="app"></div>


<script id="appTemplate" type="x-template">
    <a-locale-provider :locale="antdLocale">
        <div class="container">

            @include('admin.header-tpl')

            <main>
                <div class="common_container">

                    @include('admin.aside-tpl')

                    <div class="common_content admin_common_content">
                        <a-tabs defaultActiveKey="reviewer_progress"
                                type="card"
                                @change="tableChange">
                            <a-tab-pane tab="专家评审进度" key="reviewer_progress">
                                <!--@time 2020-06-15-->
                                <!--@time 2020-06-15-->
                                <!--@time 2020-06-15-->
                                <a-button type="primary"
                                          @click="showExcelDialog('导出专家评审进度','expert_review')"
                                          style="margin-left: 12px">
                                    导出专家评审进度
                                </a-button>
                                <!--@time 2020-06-15-->
                                <!--@time 2020-06-15-->
                                <!--@time 2020-06-15-->
                                <a-table class="project-table"
                                         rowKey="reviewer_id"
                                         size="small"
                                         :columns="reviewerProgressTableColumns"
                                         :dataSource="filteredReviewerProgress"
                                         :loading="loadingReviewerProgress"
                                         :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">
                                    <span slot="reviewer" slot-scope="text, record">
                                        @{{ record.name }}/@{{ record.prof_title }}<br>
                                        @{{ record.tel }}<br>
                                        @{{ record.work_org_name }}
                                    </span>
                                </a-table>
                            </a-tab-pane>

                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <a-tab-pane v-if="false" tab="项目分数段表" key="project_score_segments">
                                <a-table
                                        class="project-table"
                                        rowKey="num"
                                        size="small"
                                        bordered
                                        :columns="projectScoreSegmentTableColumns"
                                        :dataSource="filteredProjectScoreSegments"
                                        :loading="loadingProjectScoreSegments"
                                        :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">
                                </a-table>
                            </a-tab-pane>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>
                            <!--@v-if="false" @time 2020-06-15------>

                            <a-tab-pane tab="项目总览" key="project_list">
                                <div style="display: flex; position: relative; margin-top: 10px; align-items: center;">
                                    <!--@time 2020-06-15-->
                                    <!--@time 2020-06-15-->
                                    <!--@time 2020-06-15-->
                                    <a-button type="primary"
                                              @click="showExcelDialog('导出网评项目信息','expert_score')"
                                              style="margin-left: 12px">
                                        导出网评项目信息
                                    </a-button>
                                    <!--@time 2020-06-15-->
                                    <!--@time 2020-06-15-->
                                    <!--@time 2020-06-15-->

                                    <span style="flex: 1;"></span>
                                    <a-input style="width: 300px;" placeholder="搜索" v-model="searchKeyword"/>
                                    <a-icon v-if="searchKeyword"
                                            style="position: absolute; top: 8px; right: 8px; color: #aaa; cursor: pointer;"
                                            type="cross"
                                            @click="searchKeyword = ''"/>
                                </div>

                                <a-table class="project-table"
                                         rowKey="project_id"
                                         size="small"
                                         :columns="projectTableColumns"
                                         :dataSource="filteredProjects"
                                         :loading="loadingPageData"
                                         :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">
                                    <div slot="application_info"
                                         slot-scope="text, record">
                                        项目名称：@{{record.project_name}}<br>
                                        申报者：@{{record.applicant}}<br>
                                        申报书:<a :href="'/home/view-form?id=' + record.project_id" target="_blank">查看</a><br>
                                        附件：<a :href="'/home/view-attachments?project_id=' + record.project_id" target="_blank">查看</a><br>
                                    </div>
                                    <span slot="score_time_costs_title">
                                        评分时长
                                        <a-tooltip>
                                            <template slot="title">
                                                从评审专家第一次打开查看申报书页面、查看附件页面或打分页面开始，到其最后一次修改评分时的时长
                                            </template>
                                            <a-icon type="info-circle"/>
                                        </a-tooltip>
                                    </span>
                                    <span slot="score_time_costs" size="large" slot-scope="text, record">
                                        <template v-for="reviewer_score in record.score_per_reviewer">
                                            <span v-html="formatScoreTimeCost(reviewer_score.score_time_cost)"/><br>
                                        </template>
                                     </span>
                                    <span slot="reviewer_scores" size="large" slot-scope="text, record">
                                        <template v-for="reviewer_score in record.score_per_reviewer">
                                            <span>@{{ reviewer_score.score !== null ? reviewer_score.score : '-' }}</span><br>
                                        </template>
                                    </span>
                                    <span slot="is_evidence_material_valid" size="large" slot-scope="text, record">
                                         <template v-for="reviewer_score in record.score_per_reviewer">
                                            <label>@{{ reviewer_score.is_evidence_material_valid === null ? '-' :
                                                (reviewer_score.is_evidence_material_valid === 1 ? '是' : '否') }}</label><br>
                                        </template>
                                    </span>
                                    <span slot="reviewer_remarks" size="large" slot-scope="text, record">
                                 `       <template v-for="reviewer_score in record.score_per_reviewer">
                                            <a-textarea :disabled="true"
                                                        :autosize="{minRows: 1, maxRows: 10}"
                                                        v-model="reviewer_score.remark"/><br>
                                        </template>`
                                    </span>
                                    <span slot="avg_score" size="large" slot-scope="text, record">
                                        @{{ record.avg_score !== null ? record.avg_score : '-' }}
                                    </span>
                                    <span slot="score_status" size="large" slot-scope="text, record">
                                        @{{ record.score_status_phrase }}
                                    </span>
                                    <span slot="status_id" size="large" slot-scope="text, record">
                                         <a-tag v-if="record.status_id == STATUS_MEETING_REVIEW_TO_REVIEW"
                                                color="#2db7f5">是</a-tag>
                                         <a-tag v-else
                                                color="#f50">否</a-tag>
                                        <span v-if="record.large_group_leader_review_remark != null">
                                            <p style="font-size: 12px;color: #5e5e5e">@{{ record.status_id == STATUS_MEETING_REVIEW_TO_REVIEW ? '进入会评' : '不进入会评'}}理由</p>
                                            <a-textarea :disabled="true"
                                                        :value="record.large_group_leader_review_remark"
                                                        :autosize="{minRows: 1, maxRows: 10}"/>
                                        </span>
                                    </span>
                                </a-table>
                            </a-tab-pane>
                        </a-tabs>
                    </div>

                </div>
            </main>

            @include('admin.excel-export-tpl')
        </div>
    </a-locale-provider>
</script>
@include('admin.excel-export-js')
@include('common-js')
@include('admin.header-js')
@include('admin.aside-js')

<script>
    var queryParams = parseUrl(location.href).params;
    var awardsInfo = {!! json_encode(array_values(config('vars.awards')), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};

    var reviewerProgressTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 120,
            title: '专家组',
            dataIndex: 'reviewer_group_name',
        },
        {
            width: 150,
            title: '专家',
            key: 'reviewer',
            scopedSlots: {
                customRender: 'reviewer'
            }
        },
        {
            width: 100,
            title: '未完成项目数',
            dataIndex: 'unfinished_projects',
        },
        {
            width: 100,
            title: '已完成项目数',
            dataIndex: 'finished_projects',
        },
        {
            width: 100,
            title: '总项目数',
            dataIndex: 'total_projects'
        },

    ];

    var projectScoreSegmentTableColumns = [
        {
            title: '一',
            children: [
                {
                    width: 60,
                    title: '分数',
                    dataIndex: 'avg_score1'
                },
                {
                    width: 60,
                    title: '累计项目数',
                    dataIndex: 'accum_projects1',
                },
                {
                    width: 60,
                    title: '累计百分比',
                    dataIndex: 'accum_percent1',
                },
            ],
        },
        {
            title: '二',
            children: [
                {
                    width: 60,
                    title: '分数',
                    dataIndex: 'avg_score2'
                },
                {
                    width: 60,
                    title: '累计项目数',
                    dataIndex: 'accum_projects2',
                },
                {
                    width: 60,
                    title: '累计百分比',
                    dataIndex: 'accum_percent2',
                },
            ],
        },
        {
            title: '三',
            children: [
                {
                    width: 60,
                    title: '分数',
                    dataIndex: 'avg_score3'
                },
                {
                    width: 60,
                    title: '累计项目数',
                    dataIndex: 'accum_projects3',
                },
                {
                    width: 60,
                    title: '累计百分比',
                    dataIndex: 'accum_percent3',
                },
            ],
        },
        {
            title: '四',
            children: [
                {
                    width: 60,
                    title: '分数',
                    dataIndex: 'avg_score4'
                },
                {
                    width: 60,
                    title: '累计项目数',
                    dataIndex: 'accum_projects4',
                },
                {
                    width: 60,
                    title: '累计百分比',
                    dataIndex: 'accum_percent4',
                },
            ],
        },
        {
            title: '五',
            children: [
                {
                    width: 60,
                    title: '分数',
                    dataIndex: 'avg_score5'
                },
                {
                    width: 60,
                    title: '累计项目数',
                    dataIndex: 'accum_projects5',
                },
                {
                    width: 60,
                    title: '累计百分比',
                    dataIndex: 'accum_percent5',
                },
            ],
        },
    ];

    var projectTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 200,
            title: '申报信息',
            dataIndex:'application_info',
            scopedSlots: {
                customRender: 'application_info'
            }
        },
        // {
        //     width: 150,
        //     title: '项目名称',
        //     dataIndex: 'project_name',
        // },
        // {
        //     width: 100,
        //     title: '申报者',
        //     dataIndex: 'applicant',
        // },
        // {
        //     width: 60,
        //     title: '申报书',
        //     dataIndex: 'application_form',
        //     scopedSlots: {
        //         customRender: 'application_form'
        //     }
        // },
        // {
        //     width: 60,
        //     title: '附件',
        //     dataIndex: 'attachments',
        //     scopedSlots: {
        //         customRender: 'attachments'
        //     }
        // },
        {
            width: 100,
            key: '评分时长',
            slots: {
                title: 'score_time_costs_title'
            },
            dataIndex: 'score_time_costs',
            scopedSlots: {
                customRender: 'score_time_costs'
            }
        },
        {
            width: 70,
            title: '专家评分',
            dataIndex: 'reviewer_scores',
            scopedSlots: {
                customRender: 'reviewer_scores'
            }
        },
        {
            width: 70,
            title: '附件证明材料是否真实有效',
            dataIndex: 'is_evidence_material_valid',
            scopedSlots: {
                customRender: 'is_evidence_material_valid'
            }
        },
        {
            width: 200,
            title: '专家意见',
            dataIndex: 'reviewer_remarks',
            scopedSlots: {
                customRender: 'reviewer_remarks'
            }
        },
        {
            width: 60,
            title: '平均分',
            dataIndex: 'avg_score',
            scopedSlots: {
                customRender: 'avg_score'
            }
        },
        {
            width: 80,
            title: '评分状态',
            dataIndex: 'score_status',
            scopedSlots: {
                customRender: 'score_status'
            }
        },
        {
            width: 80,
            title: '是否进入会评',
            dataIndex: 'status_id',
            scopedSlots: {
                customRender: 'status_id'
            }
        }
    ];
</script>

<script>
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            profCategoryFilter: '',
            searchKeyword: '',

            reviewerProgressTableColumns,
            reviewerProgress: [],
            loadingReviewerProgress: false,

            PROJECT_SCORE_SEGMENT_GROUPS: 5,  // 项目分数段表的组数
            projectScoreSegmentTableColumns,
            projectScoreSegments: [],
            loadingProjectScoreSegments: false,

            //@start excel export
            ExcelExportParam:{
                type:'expert_review',
                large_group_id:queryParams.large_group_id,
            },
            //@end excel export

            /**
             * @edit
             * @time 2020-06-09
             * @需求：
             * 管理员可以查看项目信息
             */
            STATUS_MEETING_REVIEW_TO_REVIEW:'E1',
            STATUS_EXPERT_REVIEW_REJECTED:'D3',

            projectTableColumns,
            loadingPageData:false,
            pageData:[],
            large_group_id:queryParams.large_group_id,
            /**
             * @end
             */

            queryParams,
            awardsInfo,
            profCategories,

            asideSelectedKeys: queryParams.aside_key ? [queryParams.aside_key] : [],
            antdLocale: antd.locales.zh_CN,
            ...AdminHeader.data,
            ...AdminAside.data,
            ...ExcelExport.data
        },
        beforeMount() {
            this.loadAsideDefaultOpenKeys()
        },
        computed: {
            filteredReviewerProgress() {
                this.reviewerProgress.forEach((item, index) => item.num = index + 1);
                return this.reviewerProgress
            },
            filteredProjectScoreSegments() {
                let oldSegmentCount = this.projectScoreSegments.length
                if (oldSegmentCount === 0) {
                    return [];
                }
                let segments = Array.from(this.projectScoreSegments)
                let segmentGroupCount = this.PROJECT_SCORE_SEGMENT_GROUPS
                let segmentGroupSize = Math.ceil(oldSegmentCount / segmentGroupCount)
                let newSegmentCount = segmentGroupSize * segmentGroupCount
                let paddingSegmentCount = newSegmentCount - oldSegmentCount;
                for (let i = 0; i < paddingSegmentCount; i++) {
                    segments.push({avg_score: null, segment_projects: null, accum_projects: null, accum_percent: null})
                }
                let segmentGroups = this.arrayChunk(segments, segmentGroupSize)
                let result = [];
                let keys = ['avg_score', 'segment_projects', 'accum_projects', 'accum_percent']
                for (let i = 0; i < segmentGroupSize; i++) {
                    let row = {num: i + 1}
                    for (let j = 0; j < segmentGroupCount; j++) {
                        for (let key of keys) {
                            let targetKey = key + (j + 1)
                            row[targetKey] = segmentGroups[j][i][key]
                        }
                    }
                    result.push(row)
                }
                return result
            },

            /**
             * @edit
             * @time 2020-06-09
             * @需求：
             * 管理员可以查看项目信息
             */
            filteredProjects() {
                var projects = this.searchFilteredProjects;
                if (this.profCategoryFilter) {
                    projects = projects.filter(project => {
                        return project.prof_category == this.profCategoryFilter
                    })
                }
                var num = 1;
                projects.forEach(project => {
                    project.num = num++
                });
                return projects
            },
            searchFilteredProjects() {
                var projects;
                if (this.searchKeyword) {
                    var q = this.searchKeyword.trim();
                    projects = this.pageData.filter(project => {
                        var text = project.project_name + project.applicant_name + project.applicant_org_name + project.applicant_tel + project.applicant_email;
                        return text.toLowerCase().indexOf(q) != -1
                    })
                } else {
                    projects = this.pageData
                }
                return projects
            },
            /**
             * @end
             */
        },
        mounted() {
            this.reloadAsideData()
            this.reloadPageData();
            this.reloadProjectPageData();
        },
        methods: {
            arrayChunk(array, size) {
                return Array.from({length: Math.ceil(array.length / size)}, (v, i) =>
                    array.slice(i * size, i * size + size)
                );
            },
            getReviewerProgressPromise() {
                return axios.get('/api/admin/get-reviewer-progress', {
                    params: {
                        large_group_id: queryParams.large_group_id,
                    }
                })
            },
            getProjectScoreSegmentsPromise() {
                return axios.get('/api/admin/get-project-score-segments-at-expert-review', {
                    params: {
                        large_group_id: queryParams.large_group_id,
                    }
                })
            },
            reloadPageData() {
                this.loadingReviewerProgress = true;
                this.loadingProjectScoreSegments = true;
                axios.all([this.getReviewerProgressPromise(), this.getProjectScoreSegmentsPromise()]).then(
                    axios.spread((resp1, resp2) => {
                        let data = resp1.data
                        if (data.ok) {
                            this.reviewerProgress = data.reviewerProgress
                        } else {
                            error('加载专家评审进度失败: ' + data.msg)
                        }
                        this.loadingReviewerProgress = false

                        data = resp2.data
                        if (data.ok) {
                            this.projectScoreSegments = data.project_score_segments
                        } else {
                            error('加载项目分数段表失败: ' + data.msg)
                        }
                        this.loadingProjectScoreSegments = false
                    })
                )
            },

            /**
             * @edit
             * @time 2020-06-09
             * @需求：
             * 管理员可以查看项目信息
             */
            reloadProjectPageData() {
                this.loadingPageData = true;
                if (!(this.large_group_id > 0)) {
                    return  error('加载页面数据失败')
                }
                axios.post('/api/admin/get-project-data',
                    {large_group_id:this.large_group_id}).then(response => {
                    let data = response.data;
                    if (data.ok) {
                        this.pageData = data.projects;
                    } else {
                        error('加载页面数据失败: ' + data.msg)
                    }
                    this.loadingPageData = false
                })
            },
            formatScoreTimeCost(scoreTimeCost) {
                if (scoreTimeCost === null) {
                    return '-'
                } else if (scoreTimeCost < 60) {
                    return `<span style="color: red;">${scoreTimeCost}秒</span>`
                } else if (scoreTimeCost < 3600) {
                    let minutes = parseInt(scoreTimeCost / 60);
                    let seconds = scoreTimeCost % 60;
                    let content = `${minutes}分钟${seconds}秒`;
                    return scoreTimeCost < 300 ? `<span style="color: red;">${content}</span>` : content
                } else if (scoreTimeCost < 86400) {
                    let hours = parseInt(scoreTimeCost / 3600);
                    let minitues = Math.round(scoreTimeCost % 3600 / 60);
                    return `${hours}小时${minitues}分钟`
                } else {
                    let days = parseInt(scoreTimeCost / 86400);
                    if (days > 30) {
                        return '多于 30 天';
                    }
                    let hours = Math.round(scoreTimeCost % 86400 / 3600);
                    return `${days}天${hours}小时`
                }
            },
            /**
             * @end
             */


            tableChange(key){
                if (key == 'project_list') {
                    this.ExcelExportParam.type = 'expert_score'
                } else {
                    this.ExcelExportParam.type = 'expert_review'
                }
            },

            ...AdminHeader.methods,
            ...AdminAside.methods,
            ...ExcelExport.methods
        }
    })
</script>

</body>
</html>